<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆品</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 最外层容器 -->
    <div class="waresContainer">
        <!-- 头部的容器 -->
        <header class="header">
            <!-- 头部导航 -->
            <div class="header-inner">
                <!-- 头部的logo-->
                <div class="logo">
                    <a href="">
                        <i class="mui-icon logo">豆瓣|豆品</i>
                    </a>
                </div>
                <!-- 头部中间导航项 -->
                <div class="marke-nav">
                    <a href="###">全部商品</a>
                    <a href="###">豆瓣经典</a>
                    <a href="###">家居生活</a>
                    <a href="###">外出旅行</a>
                    <a href="###">文具小物</a>
                </div>
                <!-- 个人中心 -->
                <div class="marke-user">
                     <div class="user-people">
                        <div class="user-pic" id="header-user-pic">
                            <img src="./image/user_large.jpg">
                            <span>个人中心</span>
                        </div>
                        <!-- <!-下拉列表 -->
                        <!-- <div class="user-list">
                            <ul class="nav-list">
                                <li class="nav-item">
                                    <a href="###">豆品/纸书订单</a>
                                </li>
                                <li class="nav-item">
                                    <a href="###">我的优惠券</a>
                                </li>
                                <li class="nav-item">
                                    <a href="###">我的会员</a>
                                </li>
                                <li class="nav-item">
                                    <a href="###">收货地址管理</a>
                                </li>
                            </ul>
                        </div> -->
                    </div>
                </div> 
            </div>
        </header>
        <!-- 轮播图 -->
        <div class="swiper">
            <a href="###">
                <img src="./image/file-1602559242-5.jpg">
            </a>
        </div>
        <!--分类列表 -->
        <div class="waresContent">
            <p class="Newlaunch">新品首发</p>
            <!-- 三张卡片 -->
            <div class="card">
                <div class="waresContent-item">
                    <img src="./image/1.jpg">
                    <p class="cardname">豆瓣电影日历2021</p>
                    <p class="describe">时间是电影的核心角色</p>
                    <span>￥99</span>
                </div>
                <div class="waresContent-item">
                    <img src="./image/2.jpg">
                    <p class="cardname">豆瓣读书周历2021</p>
                    <p class="describe">用书籍标记时光</p>
                    <span>￥88</span>
                </div>
                <!-- 图片 -->
                <div class="waresContent-item">
                    <img src="./image/3.jpg">
                    <!-- 卡片名字 -->
                    <p class="cardname">豆猫电影手办</p>
                    <!-- 卡片描述 -->
                    <p class="describe">阿猫阿黑“变身”导演影迷</p>
                    <span>￥59</span>
                </div>
            </div>
            <!-- 会员中心 -->
            <div class="member">
                <img src="./image/4.jpg">
            </div>
            <!-- 限时抢购 -->
            <div class="sale">
                <p class="sale-name">限时抢购</p>
                <p class="time">
                   " 距结束："
                    <em>02</em>  
                    "天" 
                    <em>00</em> 
                    "时" 
                    <em>57</em>
                    "分"
                </p>
            </div>
            <!-- 限时抢购下的图片 -->
            <div class="imgSale">
                <div class="big"><img src="./image/5.jpg"></div>
                <!-- 小图片 -->
                <div class="small">
                    <img src="./image/6.jpg">
                    <p class="saleName">豆猫卫衣</p>
                    <p class="saleTitle">厚毛圈面料，柔软舒适</p>
                    <p class="reduce">立减30元</p>
                    <p class="drop">
                        <span class="price">￥168</span>
                        <span class="beforePrice">￥198</span>
                    </p>
                    <span class="rapid">马上抢</span>
            </div>
        </div>
        <!-- 人气单品 -->
        <p class="hotItem">人气单品</p>
    </div>
</body>
</html>